const template = document.createElement("template");
template.innerHTML = `
<img class="image"/>
<div class="container">
<p class="name"></p>
<p class="email"></p>
<button class="button">Follow</button>
</div>
<link rel="stylesheet" href="./css/user-card.css" type="text/css">
`;
class UserCard extends HTMLElement {
  static get observedAttributes() {
    return ["name", "email", "image"];
  }
  $img;
  $name;
  $email;
  shadowRoot;
  constructor() {
    super();
    this.shadowRoot = this.attachShadow({ mode: "open" });
    const content = template.content.cloneNode(true);
    this.shadowRoot.appendChild(content);
    this.$img = this.shadowRoot.querySelector("img");
    this.$name = this.shadowRoot.querySelector(".container>.name");
    this.$email = this.shadowRoot.querySelector(".container>.email");
  }
  attributeChangedCallback(name, oldValue, newValue) {
    // console.log(name, oldValue, newValue);

    this.render();
  }
  render() {
    this.$img.setAttribute("src", this.getAttribute("image"));
    this.$name.textContent = this.getAttribute("name");
    this.$email.textContent = this.getAttribute("email");
  }
}
customElements.define("user-card", UserCard);
